<template>
	<view>
		<!-- <view class="card u-p-l-20 u-p-t-20 u-p-r-20 u-p-b-20 flex align-start">
			<view class="u-m-l-12">
				<view class="u-m-t-10 u-font-36 text999">
					{{handleOrderStatusFormat(orderInfo.status,orderInfo.orderType)}}
				</view>
			</view>
		</view> -->

		<view class="card u-p-l-20 u-p-t-24 u-p-r-20 u-p-b-32">
			<view class="u-font-36 text-black text-bold">订单状态</view>
			<view class="u-m-t-40 flex align-center justify-between">
				<view style="color: #696A6C;">{{handleOrderStatusFormat(orderInfo.status,orderInfo.orderType)}}</view>
			</view>
		</view>
		<view class="card u-p-l-20 u-p-r-20 u-p-t-24 u-p-b-24">
			<block v-for="(item,k) in orderInfo.orderDetails" :key="k">
				<view class="flex">
					<view class="img-box">
						<u-image :showLoading="true" mode="aspectFill" radius="8rpx" :src="item.image" width="174rpx"
							height="174rpx">
							<view slot="loading">
								<u-loading-icon></u-loading-icon>
							</view>
						</u-image>
					</view>
					<view class="u-m-l-10">
						<view class="ellipsis2 text-black">{{item.productName}}...</view>
						<view class="u-m-t-10 u-font-xs text999">{{item.unit}}</view>
						<view class="u-m-t-10 flex align-center justify-between">
							<view style="color: #FD002B;">
								<text class="text-bold  u-font-xs">￥</text>
								<text
									class="u-font-lgm  text-bold u-m-r-16">{{parseFloat(item.salePrice).toFixed(2)}}</text>
								<text class="u-font-xs" style="color: #999;">原价：</text>
								<text class="u-font-xs"
									style="color: #999;text-decoration: line-through;">{{parseFloat(item.price).toFixed(2)}}</text>
								<!-- <text class="u-font-xs  text-bold">.99</text> -->
							</view>
							<view class="u-font-xs text999">x{{item.count}}</view>
						</view>
					</view>
				</view>
				<view class="u-m-t-32 flex align-center" style="overflow: scroll;" v-if="orderImageList.length>0">
					<view v-for="(images,j) in orderImageList" class="u-m-r-20" :key="j">
						<u-image :showLoading="true" mode="" radius="8rpx" @tap="handleShowImage(images.image)"
							:src="images.image" width="100rpx" height="100rpx">
							<view slot="loading">
								<u-loading-icon></u-loading-icon>
							</view>
						</u-image>
						<u-overlay :show="showImage" @click="showImage = false">
							<view class="warp">
								<view class="rect text-center u-p-l-60" @tap.stop style="padding-top: 280rpx;">
									<u-image :src="showImageSrc" width="620rpx" height="620rpx"></u-image>
								</view>
							</view>
						</u-overlay>
					</view>
				</view>
			</block>

			<view class="u-m-t-24 flex align-center justify-between  u-p-t-18 solid-top">
				<view style="color: #A8A8A8;">支付总额</view>
				<view class="text-bold" style="color: #696A6C;">
					<text class="u-font-24">￥</text>
					<text>{{parseFloat(orderInfo.amount).toFixed(2)}}</text>
				</view>
			</view>

			<view class="u-m-t-40 flex align-center justify-between"
				v-if="orderInfo.isVoucher==2&&orderInfo.orderType=='0'">
				<view style="color: #A8A8A8;">优惠券</view>
				<view class="flex align-center">
					<text class="" style="color: #ED4B48;">-￥{{parseFloat(orderInfo.voucherPrice).toFixed(2)}}</text>
				</view>
			</view>
			<view class="u-m-t-40 flex align-center justify-between"
				v-if="orderInfo.isVoucher==1&&orderInfo.orderType=='0'">
				<view style="color: #A8A8A8;">优惠券</view>
				<view class="flex align-center">
					<text class="" style="color: #ED4B48;">未使用</text>
				</view>
			</view>

			<view class="text-black u-m-t-32 flex align-center justify-end" v-if="orderInfo.payStatus==1">
				<text>实付</text>
				<text class="u-font-24">￥</text>
				<text class="u-font-40 text-bold">{{parseFloat(orderInfo.payAmount).toFixed(2)}}</text>
			</view>
			<view class="text-black u-m-t-32 flex align-center justify-end" v-else>
				<text>应付</text>
				<text class="u-font-24">￥</text>
				<text class="u-font-40 text-bold">{{parseFloat(orderInfo.payAmount).toFixed(2)}}</text>
			</view>
		</view>

		<view class="card u-p-l-20 u-p-r-20 u-p-b-24">
			<!-- <view class="flex align-center justify-between u-p-t-24">
				<view style="color: #A8A8A8;">订单状态</view>
				<view style="color: #696A6C;">{{handleOrderStatusFormat(orderInfo.status,orderInfo.orderType)}}</view>
			</view> -->

			<view class="flex align-center justify-between u-p-t-24">
				<view style="color: #A8A8A8;">订单编号</view>
				<view class="flex align-center" style="color: #696A6C;">
					<text class="copy u-m-r-10" @click="copy(orderInfo.id)">复制</text>
					<u-parse :content="orderInfo.id" :selectable="true"></u-parse>
				</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24">
				<view style="color: #A8A8A8;">下单时间</view>
				<view style="color: #696A6C;">{{orderInfo.createTime}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24"
				v-if="orderInfo.orderType=='0'&&orderInfo.orderInType==1">
				<view style="color: #A8A8A8;">上门时间</view>
				<view style="color: #696A6C;">
					<text class="copy u-m-r-10" @click="popupshow = true" v-if="orderInfo.status==0">修改</text>
					<text>{{orderInfo.visitBeginTime}}&nbsp;-{{orderInfo.visitEndTime.substring(10,16)}}</text>
				</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24" v-if="orderInfo.deliveryNo">
				<view style="color: #A8A8A8;">取件单号</view>
				<view style="color: #696A6C;">{{orderInfo.deliveryNo}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24" v-if="orderInfo.receiveNo">
				<view style="color: #A8A8A8;">送件单号</view>
				<view style="color: #696A6C;">{{orderInfo.receiveNo}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24" v-if="orderInfo.payStatus==1">
				<view style="color: #A8A8A8;">付款时间</view>
				<view style="color: #696A6C;">{{orderInfo.payDate}}</view>
			</view>
			<view class="flex align-center justify-between u-p-t-24" v-if="orderInfo.status==-99">
				<view style="color: #A8A8A8;">退款状态</view>
				<view style="color: #696A6C;">{{handleRefundOrderStatusFormat(refundOrder.status)}}</view>
			</view>

			<view class="flex align-center u-row-right">
				<view class="btn fill u-m-r-20" @click.stop="handlePayOrder()" v-if="orderInfo.status==-1">支付</view>
				<view class="btn fill u-m-r-20" style="margin-right: 20rpx;" @click.stop="handleOpenOk()"
					v-if="orderInfo.status==3&&orderInfo.orderType==1">确认完成</view>
				<view class="btn fill u-m-r-20" style="margin-right: 20rpx;" @click.stop="handleOpenOk()"
					v-if="orderInfo.status==4&&orderInfo.orderType==0">确认完成</view>
				<view class="btn plain" @click.stop="handleOpenM()" v-if="orderInfo.status==0">取消订单</view>
			</view>
		</view>
		<view class="tips"> 如果您有修改订单信息问题可以联系客服</view>
		<button open-type='contact' session-from='' hover-class='none' v-if="orderInfo.orderType==0">
			<view class="flex align-center justify-center u-p-t-10 u-p-b-10">
				<u-icon name="server-man" color="#fff" size="60rpx"></u-icon>
				<view class="u-m-l-20 u-font-28" style="color: #fff;">联系客服</view>
			</view>
		</button>


		<view style="height: 210rpx;"></view>
		<u-modal :show="show" :title="title" :content='content' showConfirmButton="true" showCancelButton="true"
			@confirm="handleCancelOrderInfo()" @cancel="handleCloseM()"></u-modal>
		<u-modal :show="showOK" title="订单确认" showConfirmButton="true" showCancelButton="true"
			@confirm="handleOrderSuccess()" @cancel="showOK=false">
			<slot>
				<text style="text-align: center;">是否确认订单完成？</text>
			</slot>
		</u-modal>



		<!-- 预约时间 -->
		<view @touchmove.stop.prevent="stopPent">
			<u-popup :show="popupshow" :closeable="true" @close="popupshow=false">
				<view class="popup u-p-32">
					<view class="">请选择上门时间</view>
					<view class="flex">
						<view class="nav">
							<view v-if="toDaysTimes.length>0" @click="selectDay('toDay',dayParams.yesterday1)"
								:class="dayParams.yesterday1==dayCur?'active':''" class="tab">今天
								({{dayParams.yesterday1}})
							</view>
							<view @click="selectDay('tomorrow',dayParams.yesterday2)"
								:class="dayParams.yesterday2==dayCur?'active':''" class="tab">明天
								({{dayParams.yesterday2}})
							</view>
							<view @click="selectDay('acquired',dayParams.yesterday3)"
								:class="dayParams.yesterday3==dayCur?'active':''" class="tab">
								后天({{dayParams.yesterday3}})
							</view>
						</view>
						<view class="time-box ">
							<scroll-view class="slide" :scroll-y="true">
								<block v-for="(it,k) in timeArr" :key="k">
									<view @click="selectTime(it,k)" :class="timeCur==k?'active':''" class="time">{{it}}
									</view>
								</block>
							</scroll-view>
						</view>
					</view>
					<u-button type="primary" color="#FF5B00" @click="handleUpdateOrderToHomeTime();popupshow=false">确认修改上门时间</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import insured from '@/components/x-unit/insured/insured'
	import {
		getOrderDetailsByIds,
		getDictList,
		payOrder,
		cancelOrderInfo,
		getOrderImageList,
		getRefundOrder,
		orderSuccess
	} from "@/common/api/api.js"

	import {
		getOrderToHomeTime,
		updateOrderToHomeTime
	} from '@/common/api/api.js'

	export default {
		components: {
			insured
		},
		data() {
			return {
				popupshow: false,
				toDaysTimes: [], // 今天时间
				tomorrowTimes: [], // 明天时间
				acquiredTimes: [], // 后天时间,
				changeShowTimes: undefined,
				day: "",
				dayParams: {
					yesterday1: '',
					yesterday2: '',
					yesterday3: '',
				},
				dayCur: '',
				timeCur: 0,
				timeArr: [],

				value: '1',
				value1: '',
				orderId: '',
				orderInfo: {},
				xihOrderStatus: [],
				mallOrderStatus: [],
				show: false,
				title: '删除提示',
				content: '确认取消订单吗？',
				qingyangOrderId: '',

				orderImageList: [],
				refundOrder: {},
				refundOrderStatus: [],
				showOK: false,
				showImage: false,
				showImageSrc: '',
				visitBeginTime: "",
				visitEndTime: "",
				day:"",

			}
		},
		onLoad(options) {
			this.orderId = options.id;
			this.qingyangOrderId = options.qingyangOrderId;
			this.handleGetDictList();
			this.handleGetOrderDetailsByIds();
			this.handleGetOrderImageList();
			this.handleGetOrderToHomeTime();
		},
		methods: {
			// 获取上门时间
			handleGetOrderToHomeTime() {
				getOrderToHomeTime().then(res => {
					this.dayParams.yesterday1 = res.data.days.toDay;
					this.dayParams.yesterday2 = res.data.days.tomorrow;
					this.dayParams.yesterday3 = res.data.days.acquired;
					this.dayCur = this.dayParams.yesterday1;
					this.timeArr = res.data.toDaysTimes;
					this.toDaysTimes = res.data.toDaysTimes;
					this.tomorrowTimes = res.data.tomorrowTimes;
					this.acquiredTimes = res.data.acquiredTimes;
					if (this.toDaysTimes.length == 0) {
						this.timeArr = this.tomorrowTimes;
						
						this.dayCur = this.dayParams.yesterday2;
						this.day = "tomorrow";
					} else {
						this.day = "toDay";
					}
					let clickTimes=this.timeArr[0];
					this.visitBeginTime = clickTimes[0];
					this.visitEndTime = clickTimes[1];

				})
			},
			// 修改上门时间
			handleUpdateOrderToHomeTime() {
				if (!this.visitBeginTime) {
					uni.$u.toast('选择上门时间');
					return;
				}
				updateOrderToHomeTime({
					id: this.orderInfo.id,
					orderId: this.orderInfo.orderId,
					deliveryNo: this.orderInfo.deliveryNo,
					visitBeginTime: this.visitBeginTime,
					visitEndTime: this.visitEndTime,
					day:this.day,
				}).then(res=>{
					uni.$u.toast(res.msg);
					this.handleGetOrderDetailsByIds();
				})
			},
			// 上门时间
			handleShowGetTime() {
				this.popupshow = true;
			},
			//日期
			selectDay(day, days) {
				this.dayCur = days;
				this.day = day;
				if (this.day == 'toDay') {
					this.timeArr = this.toDaysTimes;
				}
				if (this.day == 'tomorrow') {
					this.timeArr = this.tomorrowTimes;
				}
				if (this.day == 'acquired') {
					this.timeArr = this.acquiredTimes;
				}
				let clickTimes=this.timeArr[0];
				this.visitBeginTime = clickTimes[0];
				this.visitEndTime = clickTimes[1];
				
			},
			//时间
			selectTime(times, index) {
				this.timeCur = index;
				let clickTimes = times.split('-');

				if (this.day == 'toDay') {
					this.timeArr = this.toDaysTimes;
					this.changeShowTimes = "今天 "
				}
				if (this.day == 'tomorrow') {
					this.timeArr = this.tomorrowTimes;
					this.changeShowTimes = "明天 "
				}
				if (this.day == 'acquired') {
					this.timeArr = this.acquiredTimes;
					this.changeShowTimes = "后天 "
				}
				this.changeShowTimes = this.changeShowTimes + this.dayCur;
				this.changeShowTimes = this.changeShowTimes + "(" + times + ")";
				this.visitBeginTime = clickTimes[0];
				this.visitEndTime = clickTimes[1];
			},
			stopPent() {
				return;
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: function(res) {
						wx.getClipboardData({
							success: function(res) {
								uni.$u.toast("复制成功");
							}
						})
					}
				})
			},
			handleShowImage(src) {
				this.showImageSrc = src;
				this.showImage = true;
			},
			handleOrderSuccess() {
				orderSuccess({
					id: this.orderId
				}).then(res => {
					if (res.code == '200') {
						this.showOK = false;
						uni.$u.toast("确认成功！");
						this.handleGetDictList();
						this.handleGetOrderDetailsByIds();
						this.handleGetOrderImageList();
					}
				})
			},
			handleOpenOk() {
				this.showOK = true;
			},
			// 打开
			open() {
				this.$refs.insured.show = true;
			},
			// 获取订单详情
			handleGetOrderDetailsByIds() {
				getOrderDetailsByIds({
					orderId: this.orderId
				}).then(res => {
					if (res.code == 200) {
						this.orderInfo = res.data;
						if (this.orderInfo.status == '-99') {
							this.handleGetRefundOrder();
						}
					}
				})
			},
			// 退款信息
			handleGetRefundOrder() {
				getRefundOrder({
					orderId: this.orderId
				}).then(res => {
					this.refundOrder = res.data;
				})
			},
			// 获取订单图片
			handleGetOrderImageList() {
				getOrderImageList({
					qingyangOrderId: this.qingyangOrderId,
					busType: 1
				}).then(res => {
					this.orderImageList = res.data;
				})
			},
			//获取字典
			handleGetDictList() {
				getDictList({
					type: 'order_status_mall'
				}).then(res => {
					this.mallOrderStatus = res.data;
				})
				getDictList({
					type: 'order_status_xihu'
				}).then(res => {
					this.xihOrderStatus = res.data;
				})
				getDictList({
					type: 'refund_order_status'
				}).then(res => {
					this.refundOrderStatus = res.data;
				})
			},
			// 格式化订单状态状态
			handleOrderStatusFormat(status, type) {
				console.log(status, type)
				if (0 == type) {
					return this.$utils.selectDictLabel(this.xihOrderStatus, status)
				}
				if (1 == type) {
					return this.$utils.selectDictLabel(this.mallOrderStatus, status)
				}
			},
			// 退款格式化
			handleRefundOrderStatusFormat(status) {
				return this.$utils.selectDictLabel(this.refundOrderStatus, status)

			},
			// 微信支付订单
			handlePayOrder() {
				payOrder({
					id: this.orderId
				}).then(res => {
					if (res.code == 200) {
						uni.requestPayment({
							provider: "payment",
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.packageVal,
							signType: res.data.signType,
							paySign: res.data.paySign,
						})
					}
				})
			},
			// 取消订单
			handleCancelOrderInfo() {
				this.show = false
				cancelOrderInfo({
					orderId: this.orderId
				}).then(res => {
					if (res.code == '200') {
						uni.$u.toast('取消订单成功！');
						this.handleGetOrderDetailsByIds();
					} else {
						uni.$u.toast('删除失败！');
					}
				})
			},
			// 打开提示框
			handleOpenM() {
				this.show = true;
			},
			// 关闭提示框
			handleCloseM() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss">
	.card {
		margin-top: 20rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		width: 686rpx;
		min-height: 100rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.tag {
		min-width: 184rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 10rpx;
		text-align: center;
		background: #F7F9FC;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		color: #333333;
	}

	.textarea {
		width: 646rpx;
		height: 240rpx;
		background: #F7F9FC;
		border-radius: 8rpx;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 24rpx 32rpx;

		.btn {
			width: 420rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			color: #FFFFFF;
		}
	}

	.btn {
		width: 160rpx;
		padding: 10rpx 20rpx;
		text-align: center;
		margin-top: 20rpx;
		border-radius: 16rpx;
	}

	.fill {
		color: #FFFFFF;
		background-color: #FF5B00;
	}

	.plain {
		border: 1px solid #FF5B00;
		color: #FF5B00;
	}

	button {
		width: 60%;
		padding: 0;
		margin: 32rpx auto;
		background-color: #FF5B00;
		text-align: left;
	}

	/* button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		text-align: left;
	}*/

	button::after {
		border: none;
	}

	.tips {
		margin-top: 80rpx;
		color: #999;
		text-align: center;
		font-size: 24rpx;
	}

	.copy {
		color: #FF5B00;
	}


	.popup {
		height: 860rpx;

		.slide {
			height: 600rpx;
			// overflow-y: scroll;
		}

		.nav {
			width: 360rpx;
			margin-top: 20rpx;

			.tab {
				text-align: center;
				padding: 16rpx 10rpx;
			}

			.active {
				background-color: #f0f0f0;
				color: #72bfb6;
			}
		}

		.time-box {
			width: 100%;
			text-align: center;
			margin-bottom: 32rpx;

			.time {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}

			.active {
				color: #72bfb6;
			}
		}
	}
</style>